<div class="main-container">
  <div nz-row nzGutter="12">
    <div nz-col class="gutter-row" nzSpan="24">
      <div class="gutter-box">
        <nz-card [nzBordered]="false">
          <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
              <nz-form-label>关键词</nz-form-label>
              <nz-form-control>
                <nz-input-group [nzSuffix]="suffixTemplate">
                  <input formControlName="name" nz-input placeholder="关键词"/>
                  <ng-template #suffixTemplate
                  ><i
                    nz-icon
                    nz-tooltip
                    class="ant-input-clear-icon"
                    nzTheme="fill"
                    nzType="close-circle"
                    *ngIf="searchForm.value.name !== ''"
                    (click)="clearValue()"
                  ></i
                  ></ng-template>
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
                <button nz-button nzType="primary" (click)="openEditModal({}, 'add')"><i nz-icon nzType="plus"></i>新增流程模板</button>
              </nz-form-control>
            </nz-form-item>
          </form>
        </nz-card>

        <nz-card [nzBordered]="false">
          <nz-table #table nzSize="middle" [nzData]="tableData">
            <thead>
            <tr>
              <th>ID</th>
              <th>模板名称</th>
              <th>版本号</th>
              <th>创建人</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of table.data">
              <td>{{ data.flowId }}</td>
              <td>{{ data.name }}</td>
              <td>{{ data.version }}</td>
              <td>{{ data.creator }}</td>
              <td>{{ data.ctDate }}</td>
              <td>
                <a (click)="openEditModal(data, 'view')">查看</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="openEditModal(data, 'edit')">修改</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a nz-popconfirm nzPopconfirmTitle="确认停用？" nzPopconfirmPlacement="left"
                   (nzOnConfirm)="onDelete(data.id)">
                  停用
                </a>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </nz-card>
      </div>

    </div>
  </div>
</div>
